<template>

  <div class="edit-main">
    <div class="edit-box">
      <el-row>
        <el-col :span="21"><div class="grid-content ep-bg-purple-dark" />
          <el-input v-model="articleTitle" placeholder="标题" class="title-box" />
        </el-col>
        <el-col :span="3"><div class="grid-content ep-bg-purple-dark" />
          <el-button type="warning" class="article-button" @click="clear">重写</el-button>
          <el-button type="primary" class="article-button" @click="commitArticle">提交</el-button>
        </el-col>
      </el-row>
      <editor
          :init="init"
          v-model="articleContent"
          :tinymce-script-src="tinymceScriptSrc"
      />
    </div>
  </div>

</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import { ElMessage } from 'element-plus';
import {addArticle} from "@/request/api/article";
import router from "@/router";
import {REQUESTURL} from "@/common/constants";

export default {
  name: "AddArticlePage",
  components: {
    Editor
  },
  data() {
    // 标题
    const articleTitle = '';
    // 内容
    const articleContent = '';
    const tinymceScriptSrc = '/static/tinymce/tinymce.js'
    // 初始化配置
    const init = {
      // 语言路径
      language_url: '/static/tinymce/langs/zh_CN.js',
      // 设置简体中文
      language: 'zh_CN',
      // 编辑器的宽
      // width: 1000,
      // 编辑器的高
      height: 550,
      // 不允许改变高度
      resize: false,
      // 状态栏(最下面的状态栏) false 为关闭
      statusbar: false,
      // 隐藏右下角技术支持
      branding: false,
      // 自动获取焦点
      auto_focus: true,
      // 屏蔽右键菜单
      contextmenu_never_use_native: true,
      // 图标路径
      // icons_url: 'static/tinymce/icons/default/icons.js',
      // 定义图标主题
      // icons: 'custom',
      // 占位文本
      placeholder: '你的思念在此书写',
      // 文本格式
      doctype: '<!DOCTYPE html>',
      // 修复列表元素
      fix_list_elements : true,
      // 删除最尾的br
      remove_trailing_brs: false,
      // schema（模式）
      schema: 'html5',
      // 撤销的次数
      custom_undo_redo_levels: 10,
      base_url: '/static/tinymce',
      plugin_base_urls: '/static/tinymce/plugin',
      // 自动保存内容
      autosave_interval: "20s",
      // 草稿有效时间 20分钟
      autosave_retention: "20m",
      plugins: "save autolink autosave emoticons link preview fullscreen image",
      toolbar: "save restoredraft emoticons link preview fullscreen image",
      save_onsavecallback: function () { ElMessage.success('已保存'); },
      // 图片插入请求
      // 后端返回给TinyMCE的JSON数据，形如这样：{ location : "/demo/image/1.jpg" }
      images_upload_url: REQUESTURL + '/upload/qiniu',
    }
    return {
      articleTitle,
      articleContent,
      tinymceScriptSrc,
      init,
    }
  },
  methods: {
    // 提交
    commitArticle() {
      // 获取文章的标题
      let articleTitle = this.articleTitle;
      // 获取文章的内容 html 格式内容
      let articleContent = this.articleContent;
      // 如果内容或者标题为空则发出警告
      if (!articleTitle || !articleContent) {
        ElMessage.warning('内容和标题不能为空!')
        return;
      }
      // 获取富文本编辑器中的纯文本格式数据
      let activeEditor = tinymce.activeEditor;
      let editBody = activeEditor.getBody();
      activeEditor.selection.select(editBody);
      // 提取到纯文本内容
      let text = activeEditor.selection.getContent({'format':'text'})
      // 将文本内容截取15个字符
      let summary = text.substring(0, 100);
      // 调用添加文章的方法
      addArticle(articleTitle, summary, text, articleContent).then(res => {
        ElMessage.success(res.data);
        router.push('/home');
      })
    },
    // 重置内容
    clear() {
      this.articleContent = '';
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-main {
  height: 100%;
  width: 100%;
  background-color: #315A74;
  padding: 1px;
  .edit-box {
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 10px;
    .title-box {
      height: 30px;
      margin-bottom: 10px;
    }
    .article-button {
      margin-left: 10px;
      height: 30px;
    }
  }
}

</style>